<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:autocomplete="http://java.sun.com/jsf/composite/autocomplete">

    <h:body>
        <ui:composition template="/resources/template/template.xhtml">





            <ui:define name="content">
                <h:panelGroup rendered="#{!webUserController.hasPrivilege('LabReportFormatEditing')}" >
                    You are NOT Authorized
                </h:panelGroup>

                <h:panelGroup rendered="#{webUserController.hasPrivilege('LabReportFormatEditing')}" >
                    <h:form id="form">
                        <p:defaultCommand target="btnSave" ></p:defaultCommand>
                        <h:panelGrid columns="3" styleClass="alignTop" >

                            <h:panelGroup>
                                <p:panel header="Report">

                                    <h:panelGrid columns="2" >

                                        <p:selectOneMenu  id="mnuCat" value="#{commonReportItemController.category}"  style="width: 300px!important;">
                                            <f:selectItem itemLabel="Select" ></f:selectItem>
                                            <f:selectItems  value="#{reportFormatController.items}" var="myItem" itemValue="#{myItem}" itemLabel="#{myItem.name}" ></f:selectItems>
                                            <f:ajax event="change" execute="mnuCat" render="@all" />
                                        </p:selectOneMenu>


                                        <h:panelGroup >

                                            <p:selectBooleanCheckbox value="#{commonReportItemController.showBorders}" 
                                                                     label="Show Borders" title="Show Borders" >
                                                <p:ajax process="@this" update="@form" ></p:ajax>
                                            </p:selectBooleanCheckbox>
                                            <p:outputLabel value="Show Borders" ></p:outputLabel>
                                        </h:panelGroup>

                                    </h:panelGrid>




                                    <p:panel header="Actions" >
                                        <p:panelGrid columns="4" >
                                            <p:commandButton ajax="false" value="Add New Label" action="#{commonReportItemController.addNewLabel()}"/>
                                            <p:commandButton ajax="false"  value="Add New Value" action="#{commonReportItemController.addNewValue()}"/>
                                            <p:commandButton ajax="false"  value="Duplicate Report" action="#{commonReportItemController.duplicate()}"/>
                                            <p:commandButton  ajax="false" rendered="false" value="Add All" action="#{commonReportItemController.addAllToCat}"/>

                                        </p:panelGrid>

                                    </p:panel>


                                </p:panel>

                                <p:panel header="Report Items List" id="pIx">
                                    <p:panelGrid columns="3" >
                                        <h:selectOneListbox size="1"  id="dtbItem" value="#{commonReportItemController.current}" style="width: 270px;" >
                                            <f:selectItems value="#{commonReportItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
                                            <f:ajax event="change" execute="dtbItem" render=":#{p:component('pDetails')} :#{p:component('pPreview')}"/>
                                        </h:selectOneListbox>
                                        <p:commandButton ajax="false" action="#{commonReportItemController.duplicateItem()}" value="Duplicate"/>
                                        <p:commandButton ajax="false" action="#{commonReportItemController.removeItem()}" value="Remove"/>

                                    </p:panelGrid>

                                </p:panel>

                                <p:panel  id="pDetails" >

                                    <f:facet name="header" >
                                        Item Details
                                        <p:commandButton id="btnSave" value="Save" action="#{commonReportItemController.saveSelected()}" update="pPreview pDetails dtbItem">
                                        </p:commandButton>

                                    </f:facet>

                                    <p:panel  id="pNameDetails" >

                                        <h:panelGrid  columns="2">
                                            <h:outputText value="Name"   />
                                            <p:inputText style="min-width: 400px!important;" autocomplete="off" id="lblIiName" value="#{commonReportItemController.current.name}" >
                                                <f:ajax event="keyup" execute="lblIiName" render=":#{p:component('pPreview')}"/>
                                            </p:inputText>

                                            <h:outputText value="Content"/>
                                            <h:selectOneListbox id="cmbReportItemType" value="#{commonReportItemController.current.reportItemType}" size="1" >
                                                <f:selectItem itemLabel="No Content"/>
                                                <f:selectItems value="#{enumController.reportItemTypes}" var="rit" itemLabel="#{rit.label}" itemValue="#{rit}" ></f:selectItems>
                                            </h:selectOneListbox>


                                        </h:panelGrid>
                                        <h:panelGrid columns="5" >
                                            <h:outputText value="Type"/>
                                            <p:selectOneMenu id="cmbItemType" value="#{commonReportItemController.current.ixItemType}" >
                                                <f:selectItem itemLabel="Label" itemValue="Label"/>
                                                <f:selectItem itemLabel="Value" itemValue="Value"/>
                                                <f:selectItem itemLabel="CSS" itemValue="Css"/>
                                                <f:selectItem itemLabel="Horizontal Barcode" itemValue="Barcode"/>
                                                <f:selectItem itemLabel="Vertical Barcode" itemValue="BarcodeVertical"/>
                                            </p:selectOneMenu>
                                            <div style="min-width: 20px;"></div>
                                            <h:outputText value="Value Type"/>
                                            <p:selectOneMenu id="cmbValueType" value="#{commonReportItemController.current.ixItemValueType}"  >
                                                <f:selectItems value="#{enumController.investigationItemValueTypes}" ></f:selectItems>
                                            </p:selectOneMenu>
                                        </h:panelGrid>
                                        <h:panelGrid columns="2" >
                                            <p:outputLabel value="Contents" ></p:outputLabel>
                                            <p:inputTextarea value="#{commonReportItemController.current.description}" style="min-width: 400px!important;"></p:inputTextarea>

                                        </h:panelGrid>


                                    </p:panel>

                                    <p:panel header="Positioning" >
                                        <h:panelGrid  columns="11">
                                            <h:outputText value="Left" />
                                            <p:inputText style="width: 80px;"  autocomplete="off" id="txtLeft" value="#{commonReportItemController.current.riLeft}"/>
                                            <div style="min-width: 20px;"></div>
                                            <h:outputText value="Top"/>
                                            <p:inputText  style="width: 80px;"  autocomplete="off" id="txtTop" value="#{commonReportItemController.current.riTop}"/>
                                            <div style="min-width: 20px;"></div>
                                            <h:outputText value="Width"/>
                                            <p:inputText  style="width: 80px;"  autocomplete="off" id="txtWidth" value="#{commonReportItemController.current.riWidth}" />
                                            <div style="min-width: 20px;"></div>
                                            <h:outputText value="Height"/>
                                            <p:inputText  style="width: 80px;"  autocomplete="off" id="txtHeight" value="#{commonReportItemController.current.riHeight}"/>

                                        </h:panelGrid>
                                        <h:panelGrid columns="5" >
                                            <h:outputText value="Height PX" />
                                            <p:inputText style="width: 50px;"  autocomplete="off" id="txtHtPx" 
                                                         value="#{commonReportItemController.current.htPix}"/>
                                            <div style="min-width: 20px;"></div>
                                            <h:outputText value="Width Px"/>
                                            <p:inputText  style="width: 50px;"  autocomplete="off" id="txtWtPx" 
                                                          value="#{commonReportItemController.current.wtPix}"/>
                                            <div style="min-width: 20px;"></div>

                                        </h:panelGrid>
                                        <h:panelGrid columns="5" >

                                            <h:outputText value="Text-Align"/>
                                            <p:selectOneMenu  id="cmbTxtAlign" value="#{commonReportItemController.current.cssTextAlign}"  >
                                                <f:selectItem itemLabel="Left" itemValue="Left"/>
                                                <f:selectItem itemLabel="Right" itemValue="Right"/>
                                                <f:selectItem itemLabel="Center" itemValue="Center"/>
                                                <f:selectItem itemLabel="Justify" itemValue="Justify"/>
                                                <f:selectItem itemLabel="Inherit" itemValue="Inherit"/>
                                            </p:selectOneMenu>

                                            <h:outputText value="Vertical-Align" style="vertical-align: "/>
                                            <p:selectOneMenu  id="cmbTxtVerticalAlign" value="#{commonReportItemController.current.cssVerticalAlign}"  >
                                                <f:selectItems value="#{enumController.cssVerticalAlign}" ></f:selectItems>
                                            </p:selectOneMenu>
                                        </h:panelGrid>
                                    </p:panel>


                                    <p:panel header="Font" >
                                        <h:panelGrid  columns="5">

                                            <h:outputText value="Font Family"/>
                                            <p:inputText autocomplete="off" id="txtFontFamily" value="#{commonReportItemController.current.cssFontFamily}"/>
                                            <div style="min-width: 20px;"></div>

                                            <h:outputText value="Font Size"/>
                                            <p:inputText style="width: 50px;" autocomplete="off" id="txtFontSize" value="#{commonReportItemController.current.riFontSize}"/>

                                        </h:panelGrid>
                                        <h:panelGrid  columns="5">
                                            <h:outputText value="Font Style"/>
                                            <p:selectOneMenu  id="cmbPos" value="#{commonReportItemController.current.cssFontStyle}" >
                                                <f:selectItem itemLabel="Normal" itemValue="Normal"/>
                                                <f:selectItem itemLabel="Italic" itemValue="Italic"/>
                                                <f:selectItem itemLabel="Oblique" itemValue="Oblique"/>  
                                            </p:selectOneMenu>
                                            <div style="min-width: 20px;"></div>

                                            <h:outputText value="Font Weight"/>
                                            <p:selectOneMenu id="txtFontWeight" value="#{commonReportItemController.current.cssFontWeight}">
                                                <f:selectItem itemValue="normal" itemLabel="Normal" ></f:selectItem>
                                                <f:selectItem itemValue="bold"  itemLabel="bold" ></f:selectItem>
                                                <f:selectItem itemValue="bolder"  itemLabel="bolder" ></f:selectItem>
                                                <f:selectItem itemValue="initial"  itemLabel="initial" ></f:selectItem>
                                                <f:selectItem itemValue="lighter"  itemLabel="lighter" ></f:selectItem>
                                                <f:selectItem itemValue="100"  itemLabel="100" ></f:selectItem>
                                                <f:selectItem itemValue="200"  itemLabel="200" ></f:selectItem>
                                                <f:selectItem itemValue="300"  itemLabel="300" ></f:selectItem>
                                                <f:selectItem itemValue="400"  itemLabel="400" ></f:selectItem>
                                                <f:selectItem itemValue="500"  itemLabel="500" ></f:selectItem>
                                                <f:selectItem itemValue="600"  itemLabel="600" ></f:selectItem>
                                                <f:selectItem itemValue="700"  itemLabel="700" ></f:selectItem>
                                                <f:selectItem itemValue="800"  itemLabel="800" ></f:selectItem>
                                                <f:selectItem itemValue="900"  itemLabel="900" ></f:selectItem>
                                            </p:selectOneMenu>
                                        </h:panelGrid>
                                    </p:panel>

                                </p:panel>

                            </h:panelGroup>

                            <h:panelGroup id="pPreview"  >
                                <div style="border: 1px solid black; margin: 0px; padding: 0px;background-color: white!important;width:21.0cm!important; height: 29.7cm!important; position: relative; " >
                                    <ez:common_report commonReportFormat="#{commonReportItemController.category}" showBorders="#{commonReportItemController.showBorders}"/>
                                </div>


                            </h:panelGroup>

                            <h:panelGroup >
                                <h:panelGrid columns="1" >
                                    <p:commandButton value="Change Name" ajax="false" action="report_format_category"
                                                     onclick="this.form.target = '_blank'">
                                        <f:setPropertyActionListener value="#{commonReportItemController.category}" 
                                                                     target="#{reportFormatController.current}" ></f:setPropertyActionListener>
                                    </p:commandButton>
                                    <p:commandButton value="List Investigation Using this Format" ajax="false" 
                                                     >
                                        <f:setPropertyActionListener value="#{commonReportItemController.category}" 
                                                                     target="#{investigationController.categoryForFormat}" ></f:setPropertyActionListener>
                                    </p:commandButton>
                                    <p:dataTable value="#{investigationController.investigationWithSelectedFormat}"
                                                 var="i" rowKey="#{i.id}" 
                                                 
                                                 >
                                        <p:column >
                                            <p:commandLink value="#{i.name}" ajax="false" action="investigation"
                                                           onclick="this.form.target = '_blank'">
                                                <f:setPropertyActionListener value="#{i}" 
                                                                             target="#{investigationController.current}" ></f:setPropertyActionListener>
                                            </p:commandLink>
                                        </p:column>
                                    </p:dataTable>

                                </h:panelGrid>
                            </h:panelGroup>

                        </h:panelGrid>
                    </h:form>
                </h:panelGroup>
            </ui:define>

        </ui:composition>

    </h:body>
</html>